<template>
    <div class="menu-moddule-part">
        <div class="menu-content-part" v-for="(item,index) in officeAr">
            <div class="four-size-part" @click="gotoDetail(index)">

                <img v-if="item.imageUrl===null||item.imageUrl===''"  style=" width: 70%; height: 60%" src="../assets/office_smalldefault.png">
                <img v-else style=" width: 70%; height: 60%" :src="qn_domain+item.imageUrl">
                <p class="moddule-name" >{{item.name}}{{item.brand}}{{item.typeNo}}</p>
                <div class="moddule-button"  @click.stop="caigouselectClick(index)"> 采购</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {userInfoData,qn_domain} from '../globalVariables'

    export default {
        name: "officeCellComponent",
        data() {
            return {
              //七牛Url
                qn_domain: '',
            }
        },
        props: {
            officeAr: {
                type: Array,
                default() {
                    return []
                }
            },

        },
        created()
        {
            this.qn_domain = localStorage.getItem(qn_domain);
        },
        methods:{
            caigouselectClick(index)
            {
                var uuid=this.officeAr[index].uuid;
                this.$emit('selectspec',{'uuid':uuid,}); //selectspec，'123'为向父组件传递的数据

            },
            gotoDetail(index)
            {
                var uuid=this.officeAr[index].uuid;

                this.$router.push({name: 'officeGoodsdetail', params: {uuid: uuid}});
            }

        },
    }
</script>

<style lang="scss">

    .menu-moddule-part {
        background: #ffffff;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        height: auto;
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
    .menu-content-part {
        padding-left: 0.2rem;
        padding-right: 0.1rem;
        padding-top: 0.1rem;
        .four-size-part {
            position: relative;
            overflow: hidden;
            height: 3.0rem;
            width: 3.4rem;
            margin-top: 0.1rem;
            .moddule-name {
                text-align: center;
                color: #595959;
                font-size: 0.25rem;
                padding: 0 0.3rem 0 0.3rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
            }
            .moddule-button {
                color: white;
                text-align: center;
                display: block;
                font-size: 0.25rem;
                border-radius: 3px;
                width: 60%;
                margin-left: 20%;
                background-color: #e9b778;

            }
        }
    }
    }

</style>